<template>
  <div class="user-profile-page">
    <h1>个人中心</h1>

    <div class="profile-container">
      <!-- 左侧：个人资料 -->
      <el-card class="profile-card profile-info-card">
        <template #header>
          <div class="card-header">
            <span>个人资料</span>
            <el-button class="button" text>编辑</el-button>
          </div>
        </template>
        <div class="profile-avatar">
          <el-avatar :size="100" src="https://picsum.photos/200/200?random=1" />
          <h2 class="user-name">Ryan Septimus</h2>
        </div>
        <div class="profile-details">
          <p><i class="el-icon-phone"></i> 电话: 138****1234</p>
          <p><i class="el-icon-message"></i> 邮箱: ryan@example.com</p>
          <p><i class="el-icon-location"></i> 地址: 辽宁省沈阳市和平区</p>
          <p><i class="el-icon-male"></i> 性别: 男</p>
          <p><i class="el-icon-date"></i> 生日: 1990-01-01</p>
        </div>
      </el-card>

      <!-- 右侧：信用分概览 -->
      <el-card class="profile-card credit-score-card">
        <template #header>
          <div class="card-header">
            <span>我的信用分</span>
            <el-button class="button" text @click="goToCreditRecords">查看信用记录</el-button>
          </div>
        </template>
        <div class="score-content">
          <div class="score-composition-wrapper">
            <div class="score-center-circle">
              <span class="score-total">{{ creditScoreData.total }}</span>
            </div>
            <div class="score-segment segment-basic">
              <span class="segment-name">个人基础</span><br>
              <span class="segment-value">{{ creditScoreData.basic }}</span>
            </div>
            <div class="score-segment segment-commercial">
              <span class="segment-name">信用商业</span><br>
              <span class="segment-value">{{ creditScoreData.commercial }}</span>
            </div>
            <div class="score-segment segment-life">
              <span class="segment-name">信用生活</span><br>
              <span class="segment-value">{{ creditScoreData.life }}</span>
            </div>
            <div class="score-segment segment-social">
              <span class="segment-name">亲社会行为</span><br>
              <span class="segment-value">{{ creditScoreData.social }}</span>
            </div>
          </div>
          <div class="score-metrics-bottom">
            <div class="metric-item">
              <span class="metric-value">{{ currentCreditUses }}</span>
              <span class="metric-label">当期信用次数</span>
            </div>
            <div class="metric-item">
              <span class="metric-value">{{ creditScoreImprovement }}</span>
              <span class="metric-label">信用分提升</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 亲社会行为活动 -->
    <el-card class="pro-social-activities-card profile-card">
      <template #header>
        <div class="card-header">
          <span>亲社会行为活动</span>
        </div>
      </template>
      <div class="activity-list">
        <el-card
          v-for="activity in proSocialActivities"
          :key="activity.id"
          class="activity-card"
          shadow="hover"
        >
          <div class="activity-content">
            <h3 class="activity-title">{{ activity.title }}</h3>
            <p class="activity-description">{{ activity.description }}</p>
            <div class="activity-footer">
              <span class="activity-score">可获得 {{ activity.score }} 信用分</span>
              <el-button type="primary" size="small" @click="openActivityModal(activity.type)">
                {{ getActivityButtonText(activity.type) }}
              </el-button>
            </div>
          </div>
        </el-card>
        <el-empty v-if="proSocialActivities.length === 0" description="暂无亲社会行为活动"></el-empty>
      </div>
    </el-card>

    <!-- 活动弹窗 -->
    <el-dialog
      v-model="appointmentDialogVisible"
      title="预约活动"
      width="30%"
      center
    >
      <span>请填写预约信息。</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="appointmentDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAppointment">确认预约</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="quizDialogVisible"
      title="答题赢积分"
      width="30%"
      center
    >
      <span>请回答以下问题： [问题内容]</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="quizDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitQuiz">提交答案</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="donationDialogVisible"
      title="捐款献爱心"
      width="30%"
      center
    >
      <span>感谢您的捐款。</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="donationDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDonation">确认捐款</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 个人资料模拟数据
const userInfo = ref({
  name: 'Ryan Septimus',
  phone: '138****1234',
  email: 'ryan@example.com',
  address: '辽宁省沈阳市和平区',
  gender: '男',
  birthday: '1990-01-01',
  avatar: 'https://picsum.photos/200/200?random=1'
})

// 信用分数据
const creditScoreData = reactive({
  total: 655,
  basic: 127,
  commercial: 100,
  life: 150,
  social: 143
});

const currentCreditUses = ref(34);
const creditScoreImprovement = ref('65%');

const goToCreditRecords = () => {
  router.push('/user/records')
}

// 亲社会行为活动模拟数据
const proSocialActivities = ref([
  { id: 1, title: '社区志愿服务', description: '参与社区清洁、帮助老人等志愿活动。', score: 20, type: 'appointment' },
  { id: 2, title: '环保知识答题', description: '参与环保知识在线答题，提高环保意识。', score: 10, type: 'quiz' },
  { id: 3, title: '爱心捐款活动', description: '为贫困地区儿童捐款，献出您的爱心。', score: 30, type: 'donation' },
  { id: 4, title: '无偿献血', description: '参与无偿献血，拯救生命。', score: 50, type: 'appointment' },
  { id: 5, title: '垃圾分类宣传', description: '参与垃圾分类宣传活动，提升市民环保素养。', score: 15, type: 'quiz' },
])

// 弹窗状态
const appointmentDialogVisible = ref(false)
const quizDialogVisible = ref(false)
const donationDialogVisible = ref(false)

// 打开活动弹窗
const openActivityModal = (type) => {
  if (type === 'appointment') {
    appointmentDialogVisible.value = true
  } else if (type === 'quiz') {
    quizDialogVisible.value = true
  } else if (type === 'donation') {
    donationDialogVisible.value = true
  }
}

// 根据活动类型获取按钮文本
const getActivityButtonText = (type) => {
  switch (type) {
    case 'appointment':
      return '立即预约'
    case 'quiz':
      return '开始答题'
    case 'donation':
      return '前往捐款'
    default:
      return '参与活动'
  }
}

// 弹窗内操作
const handleAppointment = () => {
  ElMessage.success('预约成功！')
  appointmentDialogVisible.value = false
}

const handleSubmitQuiz = () => {
  ElMessage.success('答题提交成功！')
  quizDialogVisible.value = false
}

const handleDonation = () => {
  ElMessage.success('感谢您的捐款！')
  donationDialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.user-profile-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px); // 减去导航栏高度
  max-width: 2000px; // 再次增加最大宽度，尝试利用更大的屏幕空间
  margin: 0 auto; // 居中页面内容
}

h1 {
  font-size: 28px;
  color: #333;
  margin-bottom: 25px;
  text-align: center;
  font-weight: bold;
}

.profile-container {
  display: flex;
  gap: 20px;
  width: 100%; /* 确保占据父容器的全部宽度 */
  margin-bottom: 20px;

  @media (max-width: 992px) {
    flex-direction: column;
  }
}

.profile-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 25px;
  /* flex: 1; */ /* 移除或调整默认 flex 属性 */
}

.profile-info-card {
  max-width: 350px; // 限制个人资料卡片的宽度
  flex-shrink: 0; // 防止卡片收缩
  @media (max-width: 992px) {
    max-width: 100%;
  }

  .profile-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;

    .el-avatar {
      margin-bottom: 15px;
      border: 3px solid #409EFF;
    }

    .user-name {
      font-size: 24px;
      color: #333;
      margin-bottom: 5px;
    }
  }

  .profile-details {
    p {
      font-size: 16px;
      color: #606266;
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      i {
        margin-right: 10px;
        color: #409EFF;
      }
    }
  }
}

.credit-score-card {
  flex-grow: 1; // 信用分卡片占据更多空间
  flex-basis: 0; // 配合 flex-grow 使其更好地占据剩余空间

  .score-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  .score-composition-wrapper {
    position: relative;
    width: 250px;
    height: 250px;
    margin-bottom: 20px;
    border-radius: 50%;
  }

  .score-center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    font-weight: bold;
    color: #409EFF;
    z-index: 2;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }

  .score-segment {
    position: absolute;
    font-size: 14px;
    color: #303133;
    text-align: center;
    white-space: nowrap;
    z-index: 1;
  }

  .segment-basic {
    top: 25%;
    left: 15%;
    transform: translate(-50%, -50%);
    text-align: left;
  }

  .segment-commercial {
    top: 25%;
    right: 15%;
    left: auto;
    transform: translate(50%, -50%);
    text-align: right;
  }

  .segment-life {
    bottom: 25%;
    right: 15%;
    left: auto;
    transform: translate(50%, 50%);
    text-align: right;
  }

  .segment-social {
    bottom: 25%;
    left: 15%;
    transform: translate(-50%, 50%);
    text-align: left;
  }

  .score-segment .segment-name {
    position: relative;
    padding-left: 15px;
    display: inline-block;
  }

  .score-segment .segment-name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .segment-basic .segment-name::before { background-color: #A0CFFF; }
  .segment-commercial .segment-name::before { background-color: #409EFF; }
  .segment-life .segment-name::before { background-color: #79BBFF; }
  .segment-social .segment-name::before { background-color: #C6E2FF; }

  .score-metrics-bottom {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .metric-item {
    text-align: center;
    flex: 1;
  }

  .metric-value {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
    display: block;
  }

  .metric-label {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
  }
}

.pro-social-activities-card {
  margin-top: 20px;
  .activity-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 10px 0;
  }

  .activity-card {
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    .activity-content {
      padding: 15px;
    }

    .activity-title {
      font-size: 18px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 10px;
    }

    .activity-description {
      font-size: 14px;
      color: #606266;
      line-height: 1.5;
      margin-bottom: 15px;
      height: 40px; // 固定高度，避免内容过多撑开卡片
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .activity-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px dashed #eee;

      .activity-score {
        font-size: 14px;
        color: #E6A23C;
        font-weight: bold;
      }
    }
  }
}

.el-dialog__body {
  text-align: center;
  padding: 30px !important;
}
.dialog-footer {
  text-align: center;
  display: block;
}
</style> 